<template>
  <div class="addMember">
    <div class="addMember-inner">
      <div class="title">
        {{title}}
        <i @click="close"></i>
      </div>
      <div class="form">
        <el-form ref="member_form" :rules="rules" :model="member_form" label-width="111px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入" v-model="member_form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入" v-model="member_form.phone"></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select placeholder="请选择" v-model="member_form.departmentId">
              <el-option v-for='(item ,index) in departmentList' :label="item.name" :value="item.id"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户级别" prop="level">
            <el-select placeholder="请选择" v-model="member_form.level">
              <el-option v-for='(item ,index) in levelList' :label="item.name" :value="item.id"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input placeholder="请输入" v-model="member_form.position"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select placeholder="请选择" v-model="member_form.status">
              <el-option v-for='(item ,index) in statusList' :label="item.name" :value="item.id"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工号" prop="jobNum">
            <el-input placeholder="请输入" v-model="member_form.jobNum"></el-input>
          </el-form-item>
        </el-form>
        <div class="save-btn" @click="save">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AddMember",
    props:{
      data:{
        type:Object,
      },
      title:{
        type:String
      }
    },
    data() {
      const validatePhone = (rule, value, callback) => {
        var reg = /^1\d{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          callback();
        }
      };
      return {
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
          ],
          phone: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ],
          departmentId: [
            {required: true, message: '请选择部门', trigger: 'change'},
          ],
          level: [
            {required: true, message: '请选择用户级别', trigger: 'change'},
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'change'},
          ],
        },
        member_form: {
          name:'',
          phone:'',
          departmentId:'',
          level:'',
          position:'',
          status:'',
          jobNum:''
        },
        departmentList: [],//部门列表
        levelList: [
          {
            id: 1, name: '高级'
          }, {
            id: 2, name: '普通'
          }
        ],//用户级别
        statusList: [
          {
            id: 1,
            name: '启用'
          }, {
            id: 2,
            name: '禁用'
          }
        ],//状态列表
      }
    },
    created() {
      this.qurey_department_list();
      if(this.data.userId){
        console.log(this.data);
        //编辑
        this.member_form.name=this.data.name;
        this.member_form.phone=this.data.phone;
        this.member_form.departmentId=this.data.departmentId;
        this.member_form.level=this.data.level;
        this.member_form.position=this.data.position;
        this.member_form.status=this.data.status;
        this.member_form.jobNum=this.data.jobNum;
        this.member_form.userId=this.data.userId;
      }
    },
    methods: {
      //查询部门列表
      qurey_department_list() {
        this.$http.post('user/department/deptList', {
          comCode: this.$store.state.userInfo.comCode,
        }).then(res => {
          if (res.statusCode == 200) {
            this.departmentList = res.data;
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      //关闭
      close() {
        this.$emit("close");
      },
      //保存
      save() {
        let _this=this;
        this.$refs['member_form'].validate((valid) => {
          if (valid) {
            if(this.data.userId){
              //编辑
              _this.$http.post('user/user/update',_this.member_form).then(res=>{
                if(res.statusCode==200){
                  if(this.data.userId==this.$store.state.userInfo.userId){
                    this.$message.success('您修改了自己的信息，请重新登录');
                    setTimeout( ()=> {
                      localStorage.clear();
                      this.$router.push({path: '/login'});
                      this.active = 'smart';
                    },1000);
                  }else {
                    _this.$message.success('修改成功');
                    _this.$emit("close");
                    _this.$emit('update')
                  }

                }else {
                  _this.$message.error(res.statusMsg);
                }
              })
            }else {
              //新增
              _this.member_form.userId=this.$store.state.userInfo.userId;
              _this.$http.post('user/user/add',_this.member_form).then(res=>{
                if(res.statusCode==200){
                  _this.$message.success('用户已添加成功，默认密码为手机号后四位');
                  _this.$emit("close");
                  _this.$emit('update')
                }else {
                  _this.$message.error(res.statusMsg);
                }
              })
            }

          } else {
            return false
          }
        });
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .addMember {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;

    .addMember-inner {
      width: 527px;
      height: 568px;
      border-radius: 6px;
      background-color: #ffffff;
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      margin: auto;
      padding: 32px 32px 0 32px;

      > .title {
        font-weight: bold;
        font-size: 16px;
        color: #454A55;
        padding-bottom: 31px;

        > i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 32px;
          right: 32px;
          cursor: pointer;
        }
      }

      .form {
        .save-btn {
          width: 88px;
          height: 32px;
          line-height: 32px;
          background-color: #0755DB;
          border-radius: 6px;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          float: right;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style lang="scss" type="text/scss">
  .form {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      width: 320px;
      background-color: #f2f6f9;
      border-color: #f2f6f9;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
      border-color: #0755db;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
